<template>
  <div>
    <div class="centercard">
      <el-card :body-style="{ padding: '0px'}" class="cardclass">

        <div v-if="this.$store.state.show_person_info.group==='group'" style="background-color: white;height: 250px;">
          <input type="file" class="select-avatar" title="点击即可更换群头像" @change="changeGroupAvatar">
          <div style="width: 38vw;height: 40vh;display:flex;align-items:center;justify-content:center;">
            <img :src="this.$store.state.localPicture[this.$store.state.show_person_info.imageurl]" alt="loading">
          </div>

          <div class="nickname">
            {{ this.$store.state.show_person_info.nickname }}
          </div>
          <div style="display: flex;margin-left: 25%;margin-top: 2%">
            <div class="subtitle">
              群号
            </div>
            <div class="content" style="font-family: 仿宋,serif;">
              {{ this.$store.state.show_person_info.account }}
            </div>
          </div>
          <div style="display: flex;justify-content: center;margin-top: 5vh">
            <div style="margin-right: 1vw">
              <el-button type="primary" icon="el-icon-s-promotion" plain @click="startChat()">开始聊天</el-button>
            </div>
            <div style="margin-left: 1vw">
              <el-button type="danger" icon="el-icon-delete-solid" plain @click="deleteGroup()">退出群聊</el-button>
            </div>
          </div>
        </div>

        <div v-else style="background-color: white;height: 250px;">
          <div style="width: 38vw;height: 40vh;display:flex;align-items:center;justify-content:center;">
            <img :src="this.$store.state.localPicture[this.$store.state.show_person_info.imageurl]" class="image"
                 alt="loading">
            <!--          <Avatar :img-url="this.$store.state.show_person_info.imageurl" :avatar-type=2 ></Avatar>-->
<!--                                  {{this.$store.state.show_person_info.imageurl}}-->
          </div>
          <div class="nickname">
            {{ this.$store.state.show_person_info.nickname }}
          </div>
          <div style="display: flex;margin-left: 25%;margin-top: 2%">
            <div class="subtitle">
              账号
            </div>
            <div class="content" style="font-family: 仿宋,serif;">
              {{ this.$store.state.show_person_info.account }}
            </div>
          </div>

          <div style="display: flex;margin-left: 25%;margin-top: 2%;">
            <div class="subtitle">
              签名
            </div>
            <div class="content" style="font-family: 仿宋,serif;">
              {{ this.$store.state.show_person_info.motto }}
            </div>
          </div>

          <div style="display: flex;margin-left: 25%;margin-top: 2%">
            <div class="subtitle">
              备注
            </div>
            <div v-if="this.remarkFlag===0" class="content" style="font-family: 仿宋,serif;">
              {{ this.$store.state.show_person_info.remark }}
            </div>
            <div v-else>
              <el-input
                  size="small"
                  type="text"
                  placeholder="请更改备注"
                  v-model="text"
                  maxlength="10"
                  style="width: 15vw"
                  show-word-limit
                  autocomplete="off"
              >
              </el-input>
            </div>

            <div v-if="this.$store.state.show_person_info.group !== '自己'">
              <div v-if="this.remarkFlag===0" style="margin-left: 1vw;zoom: 1.5">
                <button class="el-icon-edit-outline" @click="changeRemarkTo1()"></button>
              </div>
              <div v-else style="margin-left: 1vw;zoom: 1.5">
                <button class="el-icon-check" @click="changeRemarkTo0()"></button>
              </div>
            </div>


          </div>

          <div style="display: flex;margin-left: 25%;margin-top: 2%">
            <div class="subtitle">
              分组
            </div>
            <div class="content" style="font-family: 仿宋,serif;">
              {{ this.$store.state.show_person_info.group }}
            </div>
            <div v-if="this.$store.state.show_person_info.group !== '自己'" style="margin-left: 2vw">
              <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link">
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="好友">好友</el-dropdown-item>
                  <el-dropdown-item command="家人">家人</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>


          </div>
          <div v-if="this.$store.state.show_person_info.group !== '自己'"
               style="display: flex;justify-content:center;margin-top: 2vh">
            <div style="margin-right: 1vw">
              <el-button type="primary" icon="el-icon-s-promotion" plain @click="startChat()">开始聊天</el-button>
            </div>
            <div style="margin-left: 1vw">
              <el-button type="danger" icon="el-icon-delete-solid" plain @click="deleteFriend()">删除好友</el-button>
            </div>

          </div>
          <!--          <div style="display: flex;margin-left: 25%;margin-top: 2%" >-->
          <!--            <div class="subtitle">-->
          <!--              年龄-->
          <!--            </div>-->
          <!--            <div class="content" style="font-family: 仿宋,serif;">-->
          <!--              {{ this.$store.state.show_person_info.age }}-->
          <!--            </div>-->
          <!--          </div>-->
          <!--          <div style="display: flex;margin-left: 25%;margin-top: 2%" >-->
          <!--            <div class="subtitle">-->
          <!--              职业-->
          <!--            </div>-->
          <!--            <div class="content" style="font-family: 仿宋,serif;">-->
          <!--              {{ this.$store.state.show_person_info.career }}-->
          <!--            </div>-->
          <!--          </div>-->
        </div>
      </el-card>
    </div>
    <el-dialog
        title="删除确认"
        :visible.sync="centerDialogVisible"
        width="30%"
        center
    >
      <div style="overflow-y: hidden;">
        <div style="margin-top: -2vh">
          <img src="../../assets/Images/deleteFriend.png" alt="">
        </div>
        <div style="text-align: center">
          你真的要删除我嘛🙁
        </div>
        <span slot="footer" class="dialog-footer" style="display: flex;justify-content: space-around;margin-top: 2vh">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmDeleteFriend">确 定</el-button>
      </span>
      </div>

    </el-dialog>

    <el-dialog
        title="删除确认"
        :visible.sync="centerDialogVisible2"
        width="30%"
        center
    >
      <div style="overflow-y: hidden;">
        <div style="margin-top: -2vh">
          <img src="../../assets/Images/deleteFriend.png" alt="">
        </div>
        <div style="text-align: center">
          我们不能离开你😭
        </div>
        <span slot="footer" class="dialog-footer" style="display: flex;justify-content: space-around;margin-top: 2vh">
        <el-button @click="centerDialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="confirmDeleteGroup">确 定</el-button>
      </span>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import Avatar from "./Avatar";
import axios from "axios";
import vue from "vue";

export default {
  name: "ContactDetail",
  mounted: function () {
    this.remarkFlag = 0;
    axios.get("http://81.70.70.110:4396/account/info", {
      params: {
        key: "id",
        scope: "all",
        value: localStorage.getItem("u_id")
      },
      headers: {
        token: localStorage.getItem("u_token")
      }
    }).then((res) => {
      let res2 = res.data.data;
      this.$store.dispatch('setPersonInfo', {
        nickname: res2['userName'],
        motto: res2['sign'],
        account: res2['userId'],
        imageurl: res2['userAvatar'],
        remark: "本人",
        group: "自己",
      })
      axios.get("http://81.70.70.110:4396/file/download/" + res2.userAvatar, {
        headers: {
          token: localStorage.getItem("u_token")
        },
        responseType: "blob"
      }).then((res1) => {
        let testImg;
        if (res1.data instanceof Blob) {
          testImg = window.URL.createObjectURL(res1.data)
        } else {
          testImg = window.URL.createObjectURL(new Blob([res1.data], {
            type: 'text/plain'
          }))
        }
        vue.set(this.$store.state.localPicture, res2.userAvatar, testImg)
        this.$store.dispatch('setLocalPicture', [res2.userAvatar , testImg])
      })
    })
  },
  data() {
    return {
      tempImg: require('../../assets/Images/image2.jpg'),
      centerDialogVisible: false,
      centerDialogVisible2: false,
      text: "",
      remarkFlag: 0,
      ownInform: {},
      nickname: this.$store.state.show_person_info.nickname,
    }
  },
  components: {
    Avatar
  },
  methods: {
    dataURItoBlob(dataURI) {
      var byteString = atob(dataURI.split(',')[1]);
      var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
      var ab = new ArrayBuffer(byteString.length);
      var ia = new Uint8Array(ab);
      for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
      }
      return new Blob([ab], {type: mimeString});
    },
    uploadAvatar(avatPath) {
      let t = localStorage.getItem('u_token');
      axios.post("http://81.70.70.110:4396/contact/avatar", null,
          {
            params: {
              avatar: avatPath,
              groupId: this.$store.state.show_person_info.account
            }, headers: {token: t}
          }).then(res => {
        this.$store.state.contactlist.group[this.$store.state.show_person_info.index].imageurl = avatPath
        this.$store.state.show_person_info.imageurl = avatPath


        // this.$store.state.show_person_info=avatPath
      }).catch(err => {
      })
    },
    changeGroupAvatar(e) {
      let file = e.target.files[0];
      let userid = localStorage.getItem('u_id');
      let t = localStorage.getItem('u_token');
      let reader = new FileReader();
      let formData = new FormData();
      var tempPath = '';
      reader.onload = () => {
        //预览
        this.tempImg = reader.result;

        let blob = this.dataURItoBlob(reader.result)


        formData.append('file', blob, file.name);
        formData.append('type', 'image');
        formData.append('userId', userid);
        axios.post("http://81.70.70.110:4396/file/upload", formData,
            {
              params: {}, headers: {token: t}
            }).then(res => {
          let j = res.data;
          if (j.code === 200) {

            // this.localPicture[j.data.savedPath]=blob
            this.$store.dispatch('setLocalPicture',[j.data.savedPath, this.tempImg])
            tempPath = j.data.savedPath;
            this.uploadAvatar(j.data.savedPath);
          } else {
          }
        }).catch(err => {
        })
      }
      reader.readAsDataURL(file);
    },
    deleteGroup() {
      this.centerDialogVisible2 = true;
    },
    confirmDeleteGroup() {
      this.centerDialogVisible2 = false;
      this.$store.state.contactlist.group.splice(this.$store.state.show_person_info.index, 1)
      axios.get("http://81.70.70.110:4396/account/info", {
        params: {
          key: "id",
          scope: "all",
          value: localStorage.getItem("u_id")
        },
        headers: {
          token: localStorage.getItem("u_token")
        }
      }).then((res) => {
        let res2 = res.data.data;
        axios.post("http://81.70.70.110:4396/contact/leave", null, {
          params: {
            groupId: this.$store.state.show_person_info.account,
            userId: parseInt(localStorage.getItem("u_id"))
          },
          headers: {
            token: localStorage.getItem("u_token")
          }
        }).then((res) => {
          this.$store.dispatch('setPersonInfo', {
            nickname: res2['userName'],
            motto: res2['sign'],
            account: res2['userId'],
            imageurl: res2['userAvatar'],
            remark: "本人",
            group: "自己",
          })
        })
      })
    },
    deleteFriend() {
      this.centerDialogVisible = true;
    },
    confirmDeleteFriend() {
      this.centerDialogVisible = false
      if (this.$store.state.show_person_info.group === "好友") {
        this.$store.state.contactlist.friends.splice(this.$store.state.show_person_info.index, 1)
      } else {
        this.$store.state.contactlist.family.splice(this.$store.state.show_person_info.index, 1)
      }
      axios.get("http://81.70.70.110:4396/account/info", {
        params: {
          key: "id",
          scope: "all",
          value: localStorage.getItem("u_id")
        },
        headers: {
          token: localStorage.getItem("u_token")
        }
      }).then((res) => {

        let res2 = res.data.data;
        axios.post("http://81.70.70.110:4396/contact/remove", null, {
          params: {
            contactId: this.$store.state.show_person_info.account,
            userId: parseInt(localStorage.getItem("u_id"))
          },
          headers: {
            token: localStorage.getItem("u_token")
          }
        }).then((res) => {
          this.$store.dispatch('setPersonInfo', {
            nickname: res2['userName'],
            motto: res2['sign'],
            account: res2['userId'],
            imageurl: res2['userAvatar'],
            remark: "本人",
            group: "自己",
          })

        })
      })

    },
    startChat() {
      this.$router.push("/home/conversation/" + this.$store.state.show_person_info.account)
    },
    changeRemarkTo1() {
      this.remarkFlag = 1;
    },
    changeRemarkTo0() {
      this.remarkFlag = 0;
      this.$store.state.show_person_info.remark = this.text;
      if (this.$store.state.show_person_info.group === "好友") {
        this.$store.state.contactlist.friends[this.$store.state.show_person_info.index].remark = this.text;
      } else {
        this.$store.state.contactlist.family[this.$store.state.show_person_info.index].remark = this.text;
      }
      axios.post("http://81.70.70.110:4396/contact/remark", null, {
        params: {
          contactId: this.$store.state.show_person_info.account,
          remark: this.text,
          userId: parseInt(localStorage.getItem("u_id"))
        },
        headers: {
          token: localStorage.getItem("u_token")
        }
      }).then((res) => {
      })
      this.text = ""
    },
    handleCommand(command) {
      if (command === "家人") {
        if (this.$store.state.show_person_info.group === "好友") {
          let temp = this.$store.state.contactlist.friends[this.$store.state.show_person_info.index];
          temp.group = command;
          this.$store.state.contactlist.family.splice(0, 0, temp)
          this.$store.state.contactlist.friends.splice(this.$store.state.show_person_info.index, 1)
        }
        this.$store.state.show_person_info.group = command;
      }
      if (command === "好友") {
        if (this.$store.state.show_person_info.group === "家人") {
          let temp = this.$store.state.contactlist.family[this.$store.state.show_person_info.index];
          temp.group = command;
          this.$store.state.contactlist.friends.splice(0, 0, temp)
          this.$store.state.contactlist.family.splice(this.$store.state.show_person_info.index, 1)
        }
        this.$store.state.show_person_info.group = command;
      }
      axios.post("http://81.70.70.110:4396/contact/group", null, {
        params: {
          contactId: this.$store.state.show_person_info.account,
          group: command,
          userId: parseInt(localStorage.getItem("u_id"))
        },
        headers: {
          token: localStorage.getItem("u_token")
        }
      }).then((res) => {
      })


    }
  },

}
</script>

<style scoped>
/deep/ .el-dialog.el-dialog--center {
  border-radius: 8px;
}

.cardclass {
  border-radius: 15px;
  width: 38vw;
  height: 90vh;
}

.select-avatar {
  position: fixed;
  height: 40vh;
  width: 38vw;
  font-size: 2vh;
  outline: none;
  border: none;
  z-index: 1;
  opacity: 0;
  cursor: pointer
}

.content {
  /*font-family: "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑 Light", Arial, sans-serif;*/
  /*font-size: 18px;*/
  font-size: 3vh;
  margin-left: 10px;
  margin-top: 2px;
  color: black;
  text-align: left;
}

.subtitle {
  white-space: nowrap;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑 Light", Arial, sans-serif;
  /*font-size: 18px;*/
  font-size: 3vh;
  width: 5vw;
  margin-left: 10px;
  color: gray;
}

.nickname {
  margin-top: 3%;
  margin-bottom: 4%;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  font-size: 6vh;
  /*font-weight: bold;*/
  text-align: center;
}

.avatar3 {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.centercard {
  display: flex;
  align-items: center; /*垂直居中*/
  justify-content: center; /*水平居中*/
  width: 100%;
  height: 100%;
}

Avatar {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
</style>
